<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>bootstrap_table_demo</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="jquery-3.3.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <style>div{ } .container-fluid,.col-12{ padding:0px; } #head_img{ background-image:url(fbkg.jpg); height:200 px; background-repeat: no-repeat; background-size: cover; background-position:0px -232px; opacity:1.0; z-index:100; } #content_img{ background-image:url(fbkg.jpg); height:200 px; background-size: cover; background-position:0px -232px; opacity:0.7; padding-top:20px; } #scrollspy{ height:350px; overflow:scroll; color:#d9f2e6; }</style></head>
  
  <body>
    <div class="container-fluid">
      <!-- 页头（折叠水平导航栏demo） -->
      <div class="col-12">
        <div class="pos-f-t" id="head_img">
          <div class="collapse" id="navbarToggleExternalContent" style="opacity: 1">
            <div class="p-4">
              <h4 class="text-white">Collapsed content</h4>
              <span class="text-muted">Toggleable via the navbar brand.</span></div>
          </div>
          <nav class="navbar navbar-dark" style="opacity: 1">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <!-- 页头（折叠水平导航栏）end -->
            <!-- 模态框登录demo -->
            <button type="button" class="btn btn-primary" style="position:relative;left:38%" data-toggle="modal" data-target="#exampleModal">LOGIN</button>
            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">LOGIN</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span></button>
                  </div>
                  <div class="modal-body">
                    <div class="row">
                      <div class="col-md-12">
                        <form class="form-group" id="login_form">
                          <h2 class="text-center">用户登录</h1>
                            <div class="form-group">
                              <input type="text" class="form-control" id="login_username" name="login_username" placeholder="用户名" autocomplete="off" autofocus="autofocus"></div>
                            <div class="form-group help">
                              <input type="password" class="form-control" id="login_password" name="login_password" placeholder="密　码"></div>
                            <div class="form-group">
                              <div class="custom-control custom-checkbox mb-3">
                                <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
                                <label class="custom-control-label" for="customCheck">Remember me</label>
                                <div style="position:relative;left:80%">
                                  <button type="submit" id="login_btn" name="login_btn" class="btn btn-primary">登录</a></button>
                                  <button type="button" class="btn btn-link">
                                    <a data-toggle="modal" data-target="#register" href="">注册</a></button>
                                </div>
                              </div>
                            </div>
                        </form>
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button></div>
                </div>
              </div>
            </div>
            <!-- 模态框end -->
            <form class="form-inline navbar-form pull-right">
              <input class="form-control" type="text" placeholder="Search">
              <button class="btn btn-success-outline btn-success" type="submit">Search</button></form>
          </nav>
        </div>
      </div>
      <div class="col-12">
        <!-- 轮播图demo -->
        <div id="carouselExampleIndicators" class="carousel slide w-100" data-ride="carousel" style="height:0px position:absolute">
          <ol class="carousel-indicators" style="height:300px">
            <!-- 隐藏轮播图切换图标 <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            -->
          </ol>
          <div class="carousel-inner" style="height:550px">
            <div class="carousel-item active">
              <img class="d-block w-100" src="carousel_1.jpg" alt="First slide"></div>
            <div class="carousel-item">
              <img class="d-block w-100" src="carousel_2.jpg" alt="Second slide"></div>
            <div class="carousel-item">
              <img class="d-block w-100" src="carousel_3.jpg" alt="Third slide"></div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <!-- 隐藏轮播图切换图标 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            -->
          </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <!-- 隐藏轮播图切换图标 <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            -->
          </a>
        </div>
      </div>
      <!-- 页头（折叠水平导航栏）end -->
      <div class="row" id="content_img" align="center">
        <!-- 垂直导航栏（滚动监听）demo -->
        <div class="col-6 col-md-2" id="v_navbar">
          <div id="list-example" class="list-group">
            <a class="list-group-item list-group-item-action" href="#head_img">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#carouselExampleIndicators">Item2</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
            <a class="list-group-item list-group-item-action" href="#list-item-1">Item 5</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">Item6</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 7</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">Item 8</a></div>
        </div>
        <!-- 导航栏（滚动监听）end -->
        <!-- 动态标签页demo -->
        <div class="col-12 col-md-10">
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#home">Home</a></li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a></li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a></li>
          </ul>
          <div class="tab-content">
            <div id="home" class="tab-pane active">
              <br>
              <h3>HOME</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th></tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td></tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td></tr>
                  <tr>
                    <th scope="row">3</th>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td></tr>
                </tbody>
              </table>
            </div>
            <div id="menu1" class="tab-pane fade">
              <br>
              <h3>Menu 1</h3>
              <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
              <table class="table table-hover table-dark">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th></tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td></tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td></tr>
                  <tr>
                    <th scope="row">3</th>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td></tr>
                </tbody>
              </table>
            </div>
            <div id="menu2" class="tab-pane fade">
              <br>
              <h3>Menu 2</h3>
              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
            </div>
          </div>
          <!-- 动态标签页end -->
          <!-- 滚动监听demo -->
          <div class="col-12">
            <nav id="navbar-example2" class="navbar navbar-light bg-light">
              <a class="navbar-brand" href="#">Navbar</a>
              <ul class="nav nav-pills">
                <li class="nav-item">
                  <a class="nav-link" href="#fat">企业OA</a></li>
                <li class="nav-item">
                  <a class="nav-link" href="#mdo">项目管理</a></li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">More</a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#one">固定资产管理</a>
                    <a class="dropdown-item" href="#two">考勤管理系统</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#three">公文传输系统</a></div>
                </li>
              </ul>
            </nav>
            <div id="scrollspy" data-spy="scroll" data-target="#navbar-example2" data-offset="0">
              <h4 id="fat">企业OA</h4>
              <p>企业OA也称为办公自动化(Office Automation)，是一门综合性的科学技术，兴于70年代后的美国和日本。按照美国麻省理工学院M.C.季斯曼教授的定义： OA就是将计算机技术、通信技术、系统科学与行为科学应用于用传统的数据处理技术难以处理的量非常大而结构又不明确的那些业务上的一项综合技术。</p>
              <h4 id="mdo">项目管理</h4>
              <p>按照传统的做法，当企业设定了一个项目后，参与这个项目的至少会有好几个部门，包括财务部门、市场部门、行政部门等等，而不同部门在运作项 目过程中不可避免地会产生摩擦，须进行协调，而这些无疑会增加项目的成本，影响项目实施的效率。 而项目管理的做法则不同。不同职能部门的成员因为某一个项目而组成团队，项目经理则是项目团队的领导者，他们所肩负的责任就是领导他的团队准时、 优质地完成全部工作，在不超出预算的情况下实现项目目标。项目的管理者不仅仅是项目执行者，他参与项目的需求确定、项目选择、计划直至收尾的全过程， 并在时间、成本、质量、风险、合同、采购、人力资源等各个方面对项目进行全方位的管理，因此项目管理可以帮助企业处理需要跨领域解决的复杂问题，并 实现更高的运营效率。 项目管理系统 [1] 的应用从80年代仅限于建筑、国防、航天等行业迅速发展到今天的计算机、电子通讯、金融业甚至政府机关等众多领域。目前国内，对项目 管理认识正逐渐深入，但要求项目管理人员拥有相应资格认证的还主要为大的跨国公司、IT公司等与国际接轨的企业。 项目管理系统是基于现代管理学基础之上的一种新兴的管理学科，它把企业管理中的财务控制、人才资源管理、风险控制、质量管理、信息技术管理（沟通管理） 、采购管理等有效的进行整合，以达到高效、高质、低成本的完成企业内部各项工作或项目的目的。 随着IT行业的发展，IT行业内的项目拓展和投资比比皆是。为了提高项目管理水平，赢得市场竞争，特别是在加入WTO后在国内、国际市场上拥有与国际接轨的项 目管理人才，越来越多的业界人士正通过不同的方式参加项目管理培训并力争获得世界上最权威的职业项目经理（PMP）资格认证。同时，大部分的IT行业项目管 理人士正尝试使用项目管理系统对自己的项目进行辅助管理，为了方便大家的使用，现对项目管理作一简要介绍。</p>
              <h4 id="one">固定资产管理</h4>
              <p>固定资产管理系统是企业管理中的一个重要组成部分，固定资产具有价值高，使用周期长、使用地点分散、管理难度大等特点。</p>
              <h4 id="two">考勤管理系统</h4>
              <p>按照传统的做法，当企业设定了一个项目后，参与这个项目的至少会有好几个部门，包括财务部门、市场部门、行政部门等等，而不同部门在运作项 目过程中不可避免地会产生摩擦，须进行协调，而这些无疑会增加项目的成本，影响项目实施的效率。 而项目管理的做法则不同。不同职能部门的成员因为某一个项目而组成团队，项目经理则是项目团队的领导者，他们所肩负的责任就是领导他的团队准时、 优质地完成全部工作，在不超出预算的情况下实现项目目标。项目的管理者不仅仅是项目执行者，他参与项目的需求确定、项目选择、计划直至收尾的全过程， 并在时间、成本、质量、风险、合同、采购、人力资源等各个方面对项目进行全方位的管理，因此项目管理可以帮助企业处理需要跨领域解决的复杂问题，并 实现更高的运营效率。 项目管理系统 [1] 的应用从80年代仅限于建筑、国防、航天等行业迅速发展到今天的计算机、电子通讯、金融业甚至政府机关等众多领域。目前国内，对项目 管理认识正逐渐深入，但要求项目管理人员拥有相应资格认证的还主要为大的跨国公司、IT公司等与国际接轨的企业。 项目管理系统是基于现代管理学基础之上的一种新兴的管理学科，它把企业管理中的财务控制、人才资源管理、风险控制、质量管理、信息技术管理（沟通管理） 、采购管理等有效的进行整合，以达到高效、高质、低成本的完成企业内部各项工作或项目的目的。 随着IT行业的发展，IT行业内的项目拓展和投资比比皆是。为了提高项目管理水平，赢得市场竞争，特别是在加入WTO后在国内、国际市场上拥有与国际接轨的项 目管理人才，越来越多的业界人士正通过不同的方式参加项目管理培训并力争获得世界上最权威的职业项目经理（PMP）资格认证。同时，大部分的IT行业项目管 理人士正尝试使用项目管理系统对自己的项目进行辅助管理，为了方便大家的使用，现对项目管理作一简要介绍。</p>
              <h4 id="three">公文传输系统</h4>
              <p>...</p>
            </div>
          </div>
          <div class="col-12">
            <div class="card-group">
              <div class="card">
                <img class="card-img-top" style="height:395.38px" src="me_1.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div>
                <div class="card-footer">
                  <small class="text-muted">Last updated 3 mins ago</small></div>
              </div>
              <div class="card">
                <img class="card-img-top" src="me_2.jpg" style="height:395.38px" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p></div>
                <div class="card-footer">
                  <small class="text-muted">Last updated 3 mins ago</small></div>
              </div>
              <div class="card">
                <img class="card-img-top" src="me_3.jpg" style="height:395.38px" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text"></p>
                </div>
                <div class="card-footer">
                  <small class="text-muted">Last updated 3 mins ago</small></div>
              </div>
              <div class="card">
                <img class="card-img-top" src="me_4.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text"></p>
                </div>
                <div class="card-footer">
                  <small class="text-muted">Last updated 3 mins ago</small></div>
              </div>
              <div class="card">
                <img class="card-img-top" src="me_5.jpg" style="height:395.38px" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text"></p>
                </div>
                <div class="card-footer">
                  <small class="text-muted">Last updated 3 mins ago</small></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div></div>
    </div>
    </div>
  </body>

</html>